<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>吉象出海 - 房产委托</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #EAA82A;  /* 大象黄 - 品牌主色 */
            --secondary: #2E8B57; /* 森林绿 - 辅助色 */
            --dark: #1a2e3b;     /* 深蓝色 */
            --danger: #D0021B;   /* 警示红 */
            --text: #374151;    /* 主要文字色 */
            --light-bg: #F8F9FA; /* 浅灰背景 */
            --card-shadow: 0 2px 12px rgba(0,0,0,0.06);
            --ad-green: #2E8B57; /* 广告绿色 */
            --ad-yellow: #FEEFC3; /* 广告黄色 */
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }
        
        body {
            background-color: #fff;
            color: var(--text);
            max-width: 428px;
            margin: 0 auto;
            padding-bottom: 0;
            position: relative;
        }
        
        /* 顶部品牌区 - 与home.html一致 */
        .brand-header {
            text-align: center;
            padding: 12px 0;
            background: linear-gradient(to bottom, #ffffff, #F8F9FA);
            position: relative;
            border-radius: 0;
            margin-bottom: 0;
            color: var(--primary);
        }
        
        .brand-title {
            font-size: 22px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 4px;
            position: relative;
            display: inline-block;
        }
        
        .brand-subtitle {
            font-size: 12px;
            color: var(--text);
            letter-spacing: 2px;
            opacity: 0.8;
            margin-top: 0;
            padding: 0;
            line-height: normal;
        }
        
        /* 主内容区域 */
        .container {
            padding: 15px;
            margin-bottom: 80px; /* 为底部导航留出空间 */
        }
        
        .property-evaluation {
            background: linear-gradient(to right, #4a3a20, #7d5d28);
            border-radius: 12px;
            padding: 25px;
            color: white;
            text-align: center;
            margin-bottom: 20px;
            box-shadow: var(--card-shadow);
            position: relative;
            overflow: hidden;
        }
        
        .evaluation-title {
            font-size: 22px;
            margin-bottom: 12px;
            font-weight: 700;
        }
        
        .evaluation-subtitle {
            font-size: 16px;
            margin-bottom: 20px;
            opacity: 0.9;
        }
        
        .evaluation-btn {
            background: white;
            color: var(--primary);
            border: none;
            padding: 12px 30px;
            border-radius: 50px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
        }
        
        .evaluation-features {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
            font-size: 14px;
            flex-wrap: wrap;
        }
        
        .progress-bar {
            display: flex;
            margin-bottom: 20px;
        }
        
        .progress-step {
            flex: 1;
            text-align: center;
            position: relative;
            padding: 12px 0;
        }
        
        .progress-step:not(:last-child):after {
            content: "";
            position: absolute;
            top: 25px;
            left: 50%;
            right: 0;
            height: 2px;
            background: #e0e6ed;
            z-index: 1;
        }
        
        .step-number {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #e0e6ed;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 8px;
            position: relative;
            z-index: 2;
            transition: all 0.3s;
            font-size: 14px;
        }
        
        .progress-step.active .step-number {
            background: var(--primary);
            color: white;
        }
        
        .step-label {
            font-size: 12px;
            font-weight: 500;
            color: #6B7280;
        }
        
        .progress-step.active .step-label {
            color: var(--primary);
            font-weight: 600;
        }
        
        .nav-tabs {
            display: flex;
            background: white;
            border-radius: 12px;
            box-shadow: var(--card-shadow);
            overflow: hidden;
            margin-bottom: 20px;
        }
        
        .tab {
            flex: 1;
            text-align: center;
            padding: 15px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            border-bottom: 3px solid transparent;
        }
        
        .tab.active {
            border-bottom: 3px solid var(--primary);
            color: var(--primary);
            background: rgba(234, 168, 42, 0.05);
        }
        
        .form-container {
            background: white;
            border-radius: 12px;
            box-shadow: var(--card-shadow);
            overflow: hidden;
            margin-bottom: 20px;
        }
        
        .form-header {
            padding: 20px;
            background: linear-gradient(to right, var(--primary), #f1c15d);
            color: white;
        }
        
        .form-header h2 {
            font-size: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .form-content {
            padding: 20px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--dark);
            display: flex;
            align-items: center;
            font-size: 14px;
        }
        
        .required::after {
            content: "*";
            color: var(--danger);
            margin-left: 4px;
        }
        
        .input-group {
            position: relative;
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #e0e6ed;
            border-radius: 8px;
            font-size: 15px;
            transition: all 0.3s;
        }
        
        .form-control:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(234, 168, 42, 0.2);
        }
        
        .input-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #9CA3AF;
            font-size: 14px;
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        
        .form-footer {
            padding: 15px 20px;
            background: #f8f9fa;
            border-top: 1px solid #e9ecef;
            display: flex;
            justify-content: flex-end;
        }
        
        .btn {
            padding: 12px 25px;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
        }
        
        .btn-primary {
            background: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background: #d3941d;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(234, 168, 42, 0.3);
        }
        
        .btn-large {
            padding: 14px 30px;
            font-size: 16px;
        }
        
        .tag-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 12px;
        }
        
        .tag {
            padding: 6px 12px;
            background: #fef8ea;
            border-radius: 30px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid #f5e5c0;
        }
        
        .tag:hover, .tag.active {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .image-upload {
            border: 2px dashed #e0e6ed;
            border-radius: 8px;
            padding: 30px 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 15px;
        }
        
        .image-upload:hover {
            border-color: var(--primary);
            background: #f8f9fa;
        }
        
        .image-upload i {
            font-size: 36px;
            color: #9CA3AF;
            margin-bottom: 10px;
        }
        
        .image-upload p {
            color: #9CA3AF;
            font-size: 14px;
        }
        
        .toggle-section {
            margin-top: 15px;
            border: 1px solid #e0e6ed;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .toggle-header {
            padding: 12px 15px;
            background: #f8f9fa;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-weight: 600;
            font-size: 15px;
        }
        
        .toggle-content {
            padding: 15px;
            background: white;
            display: none;
        }
        
        .toggle-content.active {
            display: block;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .location-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-top: 12px;
        }
        
        .location-item {
            padding: 12px;
            border: 1px solid #e0e6ed;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
        }
        
        .location-item:hover, .location-item.active {
            border-color: var(--primary);
            background: rgba(234, 168, 42, 0.05);
        }
        
        .sub-tabs {
            display: flex;
            background: #f5f5f5;
            border-radius: 50px;
            padding: 5px;
            margin-bottom: 15px;
        }
        
        .sub-tab {
            flex: 1;
            text-align: center;
            padding: 8px;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
        }
        
        .sub-tab.active {
            background: white;
            color: var(--primary);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .sub-tab-content {
            display: none;
        }
        
        .sub-tab-content.active {
            display: block;
        }
        
        /* 优化后的底部导航菜单 - 与home.html一致 */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            background: white;
            box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
            padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
            z-index: 1000;
            max-width: 428px;
            margin: 0 auto;
            border-radius: 20px 20px 0 0;
        }
        
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px 5px 10px;
            min-height: 60px;
            border-radius: 16px;
            margin: 0 5px;
            transition: all 0.2s ease;
            position: relative;
            cursor: pointer;
        }
        
        .tab-item::after {
            content: '';
            position: absolute;
            top: -15px;
            bottom: -15px;
            left: 0;
            right: 0;
        }
        
        .tab-icon {
            font-size: 1.4rem;
            margin-bottom: 4px;
            transition: all 0.2s ease;
        }
        
        .tab-label {
            font-size: 12px;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        
        .tab-item.active {
            background: rgba(234, 168, 42, 0.15);
        }
        
        .tab-item.active .tab-icon {
            color: var(--primary);
            transform: scale(1.1);
        }
        
        .tab-item.active .tab-label {
            color: var(--primary);
            font-weight: 600;
        }
        
        .tab-item:not(.active):hover {
            background: rgba(0, 0, 0, 0.03);
        }
        
        .tab-item:not(.active) .tab-icon {
            color: #6c757d;
        }
        
        .tab-item:not(.active) .tab-label {
            color: #495057;
        }
        
        /* 大象品牌元素装饰 */
        .elephant-decoration {
            position: absolute;
            top: 15px;
            left: 20px;
            opacity: 0.15;
            font-size: 32px;
            transform: rotate(-15deg);
            z-index: 0;
            color: var(--primary);
        }
        
        /* 响应式调整 */
        @media (max-width: 375px) {
            .form-row {
                grid-template-columns: 1fr;
            }
            
            .location-grid {
                grid-template-columns: 1fr;
            }
            
            .evaluation-features {
                flex-direction: column;
                align-items: center;
                gap: 8px;
            }
            
            .tab-icon {
                font-size: 1.3rem;
            }
            
            .tab-label {
                font-size: 11px;
            }
            
            .brand-title {
                font-size: 24px;
            }
            
            .brand-subtitle {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部品牌区域 - 与home.html一致 -->
    <header class="brand-header">
        <a href="home.html" class="back-button" style="position: absolute; left: 15px; top: 15px; font-size: 20px; color: var(--text);">
            <i class="fas fa-arrow-left"></i>
        </a>
        <div class="brand-title">吉象出海</div>
        <div class="brand-subtitle">泰国专业房地产服务平台</div>
    </header>
    
    <!-- 主内容区域 -->
    <div class="container">
        <div class="property-evaluation">
            <div class="evaluation-title">我的房子能值多少钱？</div>
            <div class="evaluation-subtitle">立即获取专业房产评估报告</div>
            <button class="evaluation-btn">立即评估</button>
            <div class="evaluation-features">
                <span>行业数据分析</span>
                <span>精准项目匹配</span>
                <span>专属管家跟进</span>
            </div>
        </div>
        
        <div class="progress-bar">
            <div class="progress-step active">
                <div class="step-number">1</div>
                <div class="step-label">填写信息</div>
            </div>
            <div class="progress-step">
                <div class="step-number">2</div>
                <div class="step-label">确认发布</div>
            </div>
            <div class="progress-step">
                <div class="step-number">3</div>
                <div class="step-label">委托成功</div>
            </div>
        </div>
        
        <div class="nav-tabs">
            <div class="tab active" data-tab="sale">委托出售</div>
            <div class="tab" data-tab="rent">委托出租</div>
            <div class="tab" data-tab="find">帮我找房</div>
        </div>
        
        <!-- 委托出售内容 -->
        <div class="tab-content active" id="sale-content">
            <div class="form-container">
                <div class="form-header">
                    <h2><i class="fas fa-house-user"></i> 委托出售</h2>
                </div>
                <div class="form-content">
                    <div class="form-row">
                        <div class="form-group">
                            <label class="required">小区名称</label>
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="请输入小区名称">
                                <i class="fas fa-search input-icon"></i>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="required">期望售价</label>
                            <div class="input-group">
                                <input type="number" class="form-control" placeholder="请输入期望售价">
                                <span class="input-icon">万元</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label class="required">房屋面积</label>
                            <div class="input-group">
                                <input type="number" class="form-control" placeholder="请输入房屋面积">
                                <span class="input-icon">㎡</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="required">户型</label>
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="例如：3室2厅1卫">
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>房源特色</label>
                        <div class="tag-container">
                            <div class="tag active">精装修</div>
                            <div class="tag">学区房</div>
                            <div class="tag">地铁房</div>
                            <div class="tag">南北通透</div>
                            <div class="tag">满五唯一</div>
                            <div class="tag">拎包入住</div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="required">房源描述</label>
                        <textarea class="form-control" rows="4" placeholder="请详细描述您的房源优势、周边配套等信息..."></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label>上传照片</label>
                        <div class="image-upload">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <p>点击或拖拽上传照片（最多9张）</p>
                        </div>
                    </div>
                    
                    <div class="toggle-section">
                        <div class="toggle-header">
                            <span>高级选项</span>
                            <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="toggle-content">
                            <div class="form-row">
                                <div class="form-group">
                                    <label>建筑年代</label>
                                    <input type="number" class="form-control" placeholder="请输入建筑年份">
                                </div>
                                <div class="form-group">
                                    <label>产权性质</label>
                                    <select class="form-control">
                                        <option value="">请选择产权性质</option>
                                        <option value="1">商品房</option>
                                        <option value="2">经济适用房</option>
                                        <option value="3">房改房</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label>可看房时间</label>
                                <textarea class="form-control" rows="2" placeholder="例如：工作日晚上或周末全天"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-footer">
                    <button class="btn btn-primary btn-large">
                        <i class="fas fa-paper-plane"></i> 发布委托
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 委托出租内容 -->
        <div class="tab-content" id="rent-content">
            <div class="form-container">
                <div class="form-header">
                    <h2><i class="fas fa-key"></i> 委托出租</h2>
                </div>
                <div class="form-content">
                    <div class="form-group">
                        <label class="required">房产所在城市</label>
                        <div class="location-grid">
                            <div class="location-item active">泰国-曼谷</div>
                            <div class="location-item">葡萄牙-里斯本</div>
                            <div class="location-item">希腊-雅典</div>
                            <div class="location-item">土耳其-伊斯坦布尔</div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label class="required">房产地址</label>
                            <input type="text" class="form-control" placeholder="请输入房产地址">
                        </div>
                        <div class="form-group">
                            <label class="required">您的户型</label>
                            <div class="input-group">
                                <input type="text" class="form-control" value="开间" readonly>
                                <i class="fas fa-chevron-down input-icon"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label class="required">房屋面积</label>
                            <div class="input-group">
                                <input type="number" class="form-control" placeholder="请输入房屋面积">
                                <span class="input-icon">㎡</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="required">装修等级</label>
                            <div class="input-group">
                                <input type="text" class="form-control" value="拎包入住" readonly>
                                <i class="fas fa-chevron-down input-icon"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="required">您的姓名</label>
                        <input type="text" class="form-control" placeholder="请输入姓名">
                    </div>
                    
                    <div class="form-group">
                        <label>联系方式</label>
                        <input type="tel" class="form-control" placeholder="请输入联系电话">
                    </div>
                    
                    <div class="form-group">
                        <p style="font-size: 14px; color: #9CA3AF; text-align: center;">
                            <i class="fas fa-lock"></i> 您的信息将被严格保密
                        </p>
                    </div>
                    
                    <div class="form-group" style="text-align: center; margin-top: 20px;">
                        <button class="btn btn-primary btn-large">
                            <i class="fas fa-file-alt"></i> 获取评估报告
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 帮我找房内容 -->
        <div class="tab-content" id="find-content">
            <div class="form-container">
                <div class="form-header">
                    <h2><i class="fas fa-search"></i> 帮我找房</h2>
                </div>
                <div class="form-content">
                    <div class="sub-tabs">
                        <div class="sub-tab active" data-subtab="rent">求租需求</div>
                        <div class="sub-tab" data-subtab="buy">求购需求</div>
                    </div>
                    
                    <!-- 求租需求 -->
                    <div class="sub-tab-content active" id="rent-content">
                        <div class="form-row">
                            <div class="form-group">
                                <label class="required">意向区域</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" value="选择区域" readonly>
                                    <i class="fas fa-chevron-down input-icon"></i>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="required">租金范围</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" value="选择租金范围" readonly>
                                    <i class="fas fa-chevron-down input-icon"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label class="required">意向面积</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" value="选择面积" readonly>
                                    <i class="fas fa-chevron-down input-icon"></i>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>入住时间</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="请选择日期">
                                    <i class="fas fa-calendar input-icon"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="required">需求描述</label>
                            <textarea class="form-control" rows="3" placeholder="请输入您的具体需求..."></textarea>
                        </div>
                        
                        <div class="form-group">
                            <label>特殊要求</label>
                            <div class="tag-container">
                                <div class="tag">近地铁</div>
                                <div class="tag active">精装修</div>
                                <div class="tag">可养宠物</div>
                                <div class="tag">有车位</div>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label class="required">您的姓名</label>
                                <input type="text" class="form-control" placeholder="请输入姓名">
                            </div>
                            <div class="form-group">
                                <label class="required">联系电话</label>
                                <input type="tel" class="form-control" placeholder="请输入联系电话">
                            </div>
                        </div>
                    </div>
                    
                    <!-- 求购需求 -->
                    <div class="sub-tab-content" id="buy-content">
                        <div class="form-row">
                            <div class="form-group">
                                <label class="required">意向区域</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" value="选择区域" readonly>
                                    <i class="fas fa-chevron-down input-icon"></i>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="required">预算范围</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" value="选择预算范围" readonly>
                                    <i class="fas fa-chevron-down input-icon"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label class="required">房屋类型</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" value="选择房屋类型" readonly>
                                    <i class="fas fa-chevron-down input-icon"></i>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="required">户型要求</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="例如：3室2厅">
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="required">需求描述</label>
                            <textarea class="form-control" rows="3" placeholder="请输入您的具体需求..."></textarea>
                        </div>
                        
                        <div class="form-group">
                            <label>特殊要求</label>
                            <div class="tag-container">
                                <div class="tag active">学区房</div>
                                <div class="tag">地铁房</div>
                                <div class="tag">满五唯一</div>
                                <div class="tag">南北通透</div>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label class="required">您的姓名</label>
                                <input type="text" class="form-control" placeholder="请输入姓名">
                            </div>
                            <div class="form-group">
                                <label class="required">联系电话</label>
                                <input type="tel" class="form-control" placeholder="请输入联系电话">
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-footer">
                        <button class="btn btn-primary btn-large">
                            <i class="fas fa-paper-plane"></i> 发布需求
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 优化后的底部导航菜单 - 与home.html一致 -->
    <div class="tab-bar">
        <div class="tab-item">
            <div class="tab-icon"><i class="fas fa-home"></i></div>
            <div class="tab-label">首页</div>
        </div>
        <div class="tab-item">
            <div class="tab-icon"><i class="fas fa-comment-dots"></i></div>
            <div class="tab-label">消息</div>
        </div>
        <div class="tab-item">
            <div class="tab-icon"><i class="fas fa-plus-circle"></i></div>
            <div class="tab-label">发布</div>
        </div>
        <div class="tab-item active">
            <div class="tab-icon"><i class="fas fa-handshake"></i></div>
            <div class="tab-label">委托</div>
        </div>
        <div class="tab-item">
            <div class="tab-icon"><i class="fas fa-user"></i></div>
            <div class="tab-label">我的</div>
        </div>
    </div>
    
    <script>
        // 切换主标签页
        const tabs = document.querySelectorAll('.tab');
        const tabContents = document.querySelectorAll('.tab-content');
        
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                // 移除所有active类
                tabs.forEach(t => t.classList.remove('active'));
                tabContents.forEach(c => c.classList.remove('active'));
                
                // 添加active类到当前标签
                tab.classList.add('active');
                
                // 显示对应的内容
                const tabId = tab.getAttribute('data-tab');
                document.getElementById(`${tabId}-content`).classList.add('active');
                
                // 更新表单标题
                const formHeader = document.querySelector('.form-header h2');
                if(tabId === 'sale') {
                    formHeader.innerHTML = '<i class="fas fa-house-user"></i> 委托出售';
                } else if(tabId === 'rent') {
                    formHeader.innerHTML = '<i class="fas fa-key"></i> 委托出租';
                } else {
                    formHeader.innerHTML = '<i class="fas fa-search"></i> 帮我找房';
                }
            });
        });
        
        // 切换子标签页（帮我找房）
        const subTabs = document.querySelectorAll('.sub-tab');
        const subTabContents = document.querySelectorAll('.sub-tab-content');
        
        subTabs.forEach(tab => {
            tab.addEventListener('click', () => {
                // 移除所有active类
                subTabs.forEach(t => t.classList.remove('active'));
                subTabContents.forEach(c => c.classList.remove('active'));
                
                // 添加active类到当前标签
                tab.classList.add('active');
                
                // 显示对应的内容
                const subtabId = tab.getAttribute('data-subtab');
                document.getElementById(`${subtabId}-content`).classList.add('active');
            });
        });
        
        // 高级选项切换
        const toggleHeader = document.querySelector('.toggle-header');
        if(toggleHeader) {
            const toggleContent = document.querySelector('.toggle-content');
            const toggleIcon = document.querySelector('.toggle-header i');
            
            toggleHeader.addEventListener('click', () => {
                toggleContent.classList.toggle('active');
                if(toggleContent.classList.contains('active')) {
                    toggleIcon.className = 'fas fa-chevron-up';
                } else {
                    toggleIcon.className = 'fas fa-chevron-down';
                }
            });
        }
        
        // 标签选择
        const tags = document.querySelectorAll('.tag');
        tags.forEach(tag => {
            tag.addEventListener('click', () => {
                tag.classList.toggle('active');
            });
        });
        
        // 位置选择
        const locationItems = document.querySelectorAll('.location-item');
        locationItems.forEach(item => {
            item.addEventListener('click', () => {
                locationItems.forEach(i => i.classList.remove('active'));
                item.classList.add('active');
            });
        });
        
        // 图片上传区域效果
        const imageUpload = document.querySelector('.image-upload');
        if(imageUpload) {
            imageUpload.addEventListener('dragover', (e) => {
                e.preventDefault();
                imageUpload.style.borderColor = 'var(--primary)';
                imageUpload.style.backgroundColor = '#f8f9fa';
            });
            
            imageUpload.addEventListener('dragleave', () => {
                imageUpload.style.borderColor = '#e0e6ed';
                imageUpload.style.backgroundColor = 'transparent';
            });
        }
        
        // 底部导航交互 - 修复跳转问题
        document.querySelectorAll('.tab-item').forEach(item => {
            item.addEventListener('click', function() {
                const label = this.querySelector('.tab-label').textContent;
                
                // 根据点击的tab跳转到对应页面
                switch(label) {
                    case '首页':
                        window.location.href = 'home.html';
                        break;
                    case '消息':
                        window.location.href = 'message.html';
                        break;
                    case '发布':
                        window.location.href = 'postlist.html';
                        break;
                    case '委托':
                        window.location.href = 'entrust.html';
                        break;
                    case '我的':
                        window.location.href = 'profile.html';
                        break;
                }
            });
        });
        
        // 设置当前页面的tab为active - 放在最后执行
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.tab-item').forEach(item => {
                item.classList.remove('active');
            });
            document.querySelector('.tab-item:nth-child(4)').classList.add('active');
        });
    </script>
</body>
</html>